<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Custom Highlight API Module Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="  	This CSS module describes a mechanism  	for styling arbitrary ranges of a document identified by script." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://drafts.csswg.org/css-highlight-api-1/" rel="canonical">
<style>
.sample-out {
	background: white;
	padding: 0.5ch;
	border: solid 1px;
	font-size: 2em;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Custom Highlight API Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-highlight-api-1/">https://drafts.csswg.org/css-highlight-api-1/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="43241"><a class="p-name fn u-url url" href="https://florian.rivoal.net/">Florian Rivoal</a> (<span class="p-org org">On behalf of Bloomberg</span>)
      <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="https://github.com/sanketj">Sanket Joshi</a> (<a class="p-org org" href="https://www.microsoft.com">Microsoft Corporation</a>)
      <dd class="editor p-author h-card vcard" data-editor-id="40614"><a class="p-name fn u-email email" href="mailto:hober@apple.com">Theresa O'Connor</a> (<a class="p-org org" href="https://apple.com/">Apple Inc.</a>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-highlight-api-1/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-highlight-api-1">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This CSS module describes a mechanism

	for styling arbitrary ranges of a document identified by script.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-highlight-api” in the title,
	preferably like this:
	“[css-highlight-api] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
    <li><a href="#interaction"><span class="secno">2</span> <span class="content"> Module Interactions</span></a>
    <li>
     <a href="#highlights-set-up"><span class="secno">3</span> <span class="content"> Setting up Custom Highlights</span></a>
     <ol class="toc">
      <li><a href="#creation"><span class="secno">3.1</span> <span class="content"> Creating Custom Highlights</span></a>
      <li><a href="#registration"><span class="secno">3.2</span> <span class="content"> Registering Custom Highlights</span></a>
     </ol>
    <li>
     <a href="#styling-highlights"><span class="secno">4</span> <span class="content"> Styling Custom Highlights</span></a>
     <ol class="toc">
      <li><a href="#custom-highlight-pseudo"><span class="secno">4.1</span> <span class="content"> The Custom Highlight Pseudo-element: <span class="css">::highlight()</span></span></a>
      <li>
       <a href="#processing-model"><span class="secno">4.2</span> <span class="content"> Processing Model</span></a>
       <ol class="toc">
        <li><a href="#applicable-properties"><span class="secno">4.2.1</span> <span class="content"> Applicable Properties</span></a>
        <li><a href="#c-and-h"><span class="secno">4.2.2</span> <span class="content"> Cascading and Inheritance</span></a>
        <li><a href="#painting"><span class="secno">4.2.3</span> <span class="content"> Painting</span></a>
        <li><a href="#priorities"><span class="secno">4.2.4</span> <span class="content"> Priority of Overlapping Highlights</span></a>
       </ol>
     </ol>
    <li>
     <a href="#changes"><span class="secno">5</span> <span class="content"> Responding to Changes</span></a>
     <ol class="toc">
      <li><a href="#repaint"><span class="secno">5.1</span> <span class="content"> Repaints</span></a>
      <li><a href="#range-invalidation"><span class="secno">5.2</span> <span class="content"> Range Updating and Invalidation</span></a>
     </ol>
    <li><a href="#events"><span class="secno">6</span> <span class="content"> Event Handling</span></a>
    <li><a href="#privsec"><span class="secno"></span> <span class="content"> Appendix A. Privacy and Security Considerations</span></a>
    <li><a href="#credits"><span class="secno"></span> <span class="content"> Appendix B. Acknowledgements</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <div class="non-normative">
    <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
    <p><em>This section is non-normative</em>.</p>
    <p>The Custom Highlight API extends the concept of <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element" id="ref-for-highlight-pseudo-element">highlight pseudo-elements</a> (see <a href="https://www.w3.org/TR/css-pseudo-4/#highlight-pseudos">CSS Pseudo-Elements 4 §3 Highlight Pseudo-elements</a>)
	by providing a way for web developers to style the text
	of arbitrary Range objects,
	rather than being limited to the user agent defined <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-selection" id="ref-for-selectordef-selection">::selection</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-inactive-selection" id="ref-for-selectordef-inactive-selection">::inactive-selection</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-spelling-error" id="ref-for-selectordef-spelling-error">::spelling-error</a>,
	and <span class="css">'::grammar-error</span>'.
	This is useful in a variety of scenarios,
	including editing frameworks that wish to implement their own selection,
	find-on-page over virtualized documents,
	multiple selection to represent online collaboration,
	or spellchecking frameworks.</p>
    <p>The Custom Highlight API provides a programmatic way of adding and removing highlights
	that do not affect the underlying DOM structure,
	but instead applies styles to text based on <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range">range</a> objects,
	accessed via the <a class="css" data-link-type="maybe" href="#selectordef-highlight-highlight-name" id="ref-for-selectordef-highlight-highlight-name">::highlight()</a> pseudo element.</p>
    <div class="example" id="intro-ex">
     <a class="self-link" href="#intro-ex"></a> The following code uses the <a class="css" data-link-type="maybe" href="#selectordef-highlight-highlight-name" id="ref-for-selectordef-highlight-highlight-name①">::highlight()</a> pseudo-element
		to apply a yellow background and blue foreground color to the text <q>One two</q>.
		It does so by adding a <code class="idl"><a data-link-type="idl" href="#highlight" id="ref-for-highlight">Highlight</a></code> to the <code class="idl"><a data-link-type="idl" href="#highlightsregister" id="ref-for-highlightsregister">HighlightsRegister</a></code> (both of these are new concepts introduced by this specification).
		The <code class="idl"><a data-link-type="idl" href="#highlight" id="ref-for-highlight①">Highlight</a></code> will contain a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#range" id="ref-for-range">Range</a></code> whose boundary points surround the text <q>One two</q>. 
<pre class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- p>:</c-><c- nd>root</c-><c- p>::</c-><c- nd>highlight</c-><c- o>(</c-><c- f>example-highlight</c-><c- o>)</c-> <c- p>{</c->
  <c- k>background-color</c-><c- p>:</c-> <c- kc>yellow</c-><c- p>;</c->
  <c- k>color</c-><c- p>:</c-> <c- kc>blue</c-><c- p>;</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>>&lt;</c-><c- f>span</c-><c- p>></c->One <c- p>&lt;/</c-><c- f>span</c-><c- p>>&lt;</c-><c- f>span</c-><c- p>></c->two <c- p>&lt;/</c-><c- f>span</c-><c- p>>&lt;</c-><c- f>span</c-><c- p>></c->three…<c- p>&lt;/</c-><c- f>span</c-><c- p>></c->
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
<c- a>let</c-> r <c- o>=</c-> <c- k>new</c-> Range<c- p>();</c->
r<c- p>.</c->setStart<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> <c- mi>0</c-><c- p>);</c->
r<c- p>.</c->setEnd<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> <c- mi>2</c-><c- p>);</c->

CSS<c- p>.</c->highlights<c- p>.</c->add<c- p>(</c-><c- k>new</c-> Highlight<c- p>(</c-><c- u>"example-highlight"</c-><c- p>,</c-> r<c- p>));</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
     <p>The result would look like:</p>
     <div class="sample-out"> <span style="background-color:yellow;color:blue;">One Two </span>three… </div>
    </div>
   </div>
   <h2 class="heading settled" data-level="2" id="interaction"><span class="secno">2. </span><span class="content"> Module Interactions</span><a class="self-link" href="#interaction"></a></h2>
   <p>This module depends on the Infra Standard <a data-link-type="biblio" href="#biblio-infra">[INFRA]</a> and on WebIDL <a data-link-type="biblio" href="#biblio-webidl">[WebIDL]</a>.</p>
   <p>It assumes general familiarity with CSS
	and with the DOM Standard <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>,
	and specifically extends the mechanisms defined in CSS Pseudo-Elements Module Level 4 <a data-link-type="biblio" href="#biblio-css-pseudo-4">[css-pseudo-4]</a> to handle <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element" id="ref-for-highlight-pseudo-element①">highlight pseudo-elements</a>.
	The Selectors Level 4 <a data-link-type="biblio" href="#biblio-selectors-4">[selectors-4]</a> specification defines how <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-elements</a> work in general.</p>
   <p>See <a href="#references">References</a> for a full list of dependencies.</p>
   <p class="note" role="note"><span>Note:</span> This draft is an early version.
	As it matures, the CSS-WG could decide to keep it as an independent module,
	or might prefer to fold it into <a data-link-type="biblio" href="#biblio-css-pseudo-4">[css-pseudo-4]</a>,
	or a later version of that module.</p>
   <h2 class="heading settled" data-level="3" id="highlights-set-up"><span class="secno">3. </span><span class="content"> Setting up Custom Highlights</span><a class="self-link" href="#highlights-set-up"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="creation"><span class="secno">3.1. </span><span class="content"> Creating Custom Highlights</span><a class="self-link" href="#creation"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="custom-highlight">custom highlight</dfn> is a named collection of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range①">ranges</a> representing portions of a document.
	They do not necessarily fit into the element tree,
	and can arbitrarily cross element boundaries without honoring its nesting structure.
	They can be used to affect the appearance of these portions of the document
	(see <a href="#styling-highlights">§ 4 Styling Custom Highlights</a>),
	or to handle to events associated with them
	(see <a href="#events">§ 6 Event Handling</a>).</p>
   <p><a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight">Custom highlights</a> are represented by <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="highlight"><code>Highlight</code></dfn> objects, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-setlike" id="ref-for-dfn-setlike">setlike</a> objects whose <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-set-entries" id="ref-for-dfn-set-entries">set entries</a> are <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#abstractrange" id="ref-for-abstractrange">AbstractRange</a></code> objects. <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range②">Ranges</a> can be added to a <span id="ref-for-custom-highlight①">custom highlight</span> either by passing them to its constructor,
	or by using the usual API of <span id="ref-for-dfn-setlike①">setlike</span> objects
	to manipulate its <span id="ref-for-dfn-set-entries①">set entries</span>.</p>
   <p class="note" role="note"><span>Note:</span> As the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range③">ranges</a> in a <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight②">custom highlight</a> are <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#abstractrange" id="ref-for-abstractrange①">AbstractRange</a></code> objects,
	authors can chose between using <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#range" id="ref-for-range①">Range</a></code> objects and <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#staticrange" id="ref-for-staticrange">StaticRange</a></code> objects.
	See <a href="#range-invalidation">§ 5.2 Range Updating and Invalidation</a> for more details about this choice and its implications.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-for="custom highlight" data-dfn-type="dfn" data-noexport id="custom-highlight-name">name</dfn> of a <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight③">custom highlight</a> is represented by its <code class="idl"><a data-link-type="idl" href="#dom-highlight-name" id="ref-for-dom-highlight-name">name</a></code> attribute,
	which must must be a valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token">&lt;ident-token></a>.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#highlight" id="ref-for-highlight②"><c- g>Highlight</c-></a> {
  <a class="idl-code" data-link-type="constructor" href="#dom-highlight-highlight" id="ref-for-dom-highlight-highlight"><c- g>constructor</c-></a>(<a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring"><c- n>CSSOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Highlight/Highlight(name, ...initialRanges), Highlight/constructor(name, ...initialRanges), Highlight/Highlight(name), Highlight/constructor(name)" data-dfn-type="argument" data-export id="dom-highlight-highlight-name-initialranges-name"><code><c- g>name</c-></code></dfn>, <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#abstractrange" id="ref-for-abstractrange②"><c- n>AbstractRange</c-></a>... <dfn class="dfn-paneled idl-code" data-dfn-for="Highlight/Highlight(name, ...initialRanges), Highlight/constructor(name, ...initialRanges), Highlight/Highlight(name), Highlight/constructor(name)" data-dfn-type="argument" data-export id="dom-highlight-highlight-name-initialranges-initialranges"><code><c- g>initialRanges</c-></code></dfn>);
  <c- b>setlike</c->&lt;<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#abstractrange" id="ref-for-abstractrange③"><c- n>AbstractRange</c-></a>>;
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Highlight" data-dfn-type="attribute" data-export data-type="double" id="dom-highlight-priority"><code><c- g>priority</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring①"><c- n>CSSOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Highlight" data-dfn-type="attribute" data-export data-readonly data-type="CSSOMString" id="dom-highlight-name"><code><c- g>name</c-></code></dfn>;
};
</pre>
   <p>See <a href="#priorities">§ 4.2.4 Priority of Overlapping Highlights</a> for more information on the <code class="idl"><a data-link-type="idl" href="#dom-highlight-priority" id="ref-for-dom-highlight-priority">priority</a></code> attribute.</p>
   <div class="algorithm" data-algorithm="to create a custom highlight">
     When the <dfn class="dfn-paneled idl-code" data-dfn-for="Highlight" data-dfn-type="constructor" data-export data-lt="Highlight(name, ...initialRanges)|constructor(name, ...initialRanges)|Highlight(name)|constructor(name)" id="dom-highlight-highlight"><code>Highlight(CSSOMString name, AbstractRange... initialRanges)</code></dfn> constructor is invoked,
		run the following steps: 
    <ol>
     <li> Let <var>highlight</var> be the new <code class="idl"><a data-link-type="idl" href="#highlight" id="ref-for-highlight③">Highlight</a></code> object. 
     <li> If <code class="idl"><a class="idl-code" data-link-type="argument" href="#dom-highlight-highlight-name-initialranges-name" id="ref-for-dom-highlight-highlight-name-initialranges-name">name</a></code> does not <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar">parse</a> as an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token①">&lt;ident-token></a>, then <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw">throw</a> a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror">"SyntaxError"</a></code>. 
     <li> Let <var>nameArg</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-convert-idl-to-ecmascript-value" id="ref-for-dfn-convert-idl-to-ecmascript-value">converting</a> <code class="idl"><a class="idl-code" data-link-type="argument" href="#dom-highlight-highlight-name-initialranges-name" id="ref-for-dom-highlight-highlight-name-initialranges-name①">name</a></code> to an ECMAScript value. 
     <li> Set <var>highlight</var>’s <code class="idl"><a data-link-type="idl" href="#dom-highlight-name" id="ref-for-dom-highlight-name①">name</a></code> to <var>nameArg</var> 
     <li> Set <var>highlight</var>’s <code class="idl"><a data-link-type="idl" href="#dom-highlight-priority" id="ref-for-dom-highlight-priority①">priority</a></code> to <code>0</code>. 
     <li> For each <var>range</var> of <code class="idl"><a data-link-type="idl" href="#dom-highlight-highlight-name-initialranges-initialranges" id="ref-for-dom-highlight-highlight-name-initialranges-initialranges">initialRanges</a></code>,
				let <var>rangeArg</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-convert-idl-to-ecmascript-value" id="ref-for-dfn-convert-idl-to-ecmascript-value①">converting</a> <var>range</var> to an ECMAScript value,
				then run <a href="https://heycam.github.io/webidl/#es-add-delete">the steps for a built-in setlike add function</a>,
				with <var>highlight</var> as the <code>this</code> value,
				and <var>rangeArg</var> as the argument. 
     <li> Return <var>highlight</var>. 
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.2" id="registration"><span class="secno">3.2. </span><span class="content"> Registering Custom Highlights</span><a class="self-link" href="#registration"></a></h3>
   <p>In order to have any effect, <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight④">custom highlights</a> then needs to be <a data-link-type="dfn" href="#registered" id="ref-for-registered">registered</a> it into the <a data-link-type="dfn" href="#highlights-register" id="ref-for-highlights-register">highlights register</a>.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="highlights-register">highlights register</dfn> is accessed via the <code class="idl"><a data-link-type="idl" href="#dom-css-highlights" id="ref-for-dom-css-highlights">highlights</a></code> attribute of the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css">CSS</a></code> namespace,
	and represents all the <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight⑤">custom highlights</a> <a data-link-type="dfn" href="#registered" id="ref-for-registered①">registered</a> for the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#concept-document-window" id="ref-for-concept-document-window">associated Document</a>.
	It is a <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-setlike" id="ref-for-dfn-setlike②">setlike</a>, and can be updated using the usual methods.
	It’s <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-set-entries" id="ref-for-dfn-set-entries②">set entries</a> is initially empty.</p>
   <p>A <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight⑥">custom highlight</a> is said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="registered">registered</dfn> if it is in the <a data-link-type="dfn" href="#highlights-register" id="ref-for-highlights-register①">highlights register</a>.
	It stops being <a data-link-type="dfn" href="#registered" id="ref-for-registered②">registered</a> if it is later removed.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css①"><c- g>CSS</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#highlightsregister" id="ref-for-highlightsregister①"><c- n>HighlightsRegister</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="CSS" data-dfn-type="attribute" data-export data-readonly data-type="HighlightsRegister" id="dom-css-highlights"><code><c- g>highlights</c-></code></dfn>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="highlightsregister"><code><c- g>HighlightsRegister</c-></code></dfn> {
  <c- b>setlike</c->&lt;<a class="n" data-link-type="idl-name" href="#highlight" id="ref-for-highlight④"><c- n>Highlight</c-></a>>;
  <a class="n" data-link-type="idl-name" href="#highlightsregister" id="ref-for-highlightsregister②"><c- n>HighlightsRegister</c-></a> <a class="idl-code" data-link-type="method" href="#dom-highlightsregister-add" id="ref-for-dom-highlightsregister-add"><c- g>add</c-></a>(<a class="n" data-link-type="idl-name" href="#highlight" id="ref-for-highlight⑤"><c- n>Highlight</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HighlightsRegister/add(value)" data-dfn-type="argument" data-export id="dom-highlightsregister-add-value-value"><code><c- g>value</c-></code></dfn>);
};
</pre>
   <div class="algorithm" data-algorithm="to register a custom highlight">
     To <a data-link-type="dfn" href="#registered" id="ref-for-registered③">register</a> a <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight⑦">custom highlight</a>,
		invoke the <code class="idl"><a data-link-type="idl" href="#dom-highlightsregister-add" id="ref-for-dom-highlightsregister-add①">add()</a></code> of the <a data-link-type="dfn" href="#highlights-register" id="ref-for-highlights-register②">highlights register</a> with the <span id="ref-for-custom-highlight⑧">custom highlight</span> as the argument. 
    <p>When invoked,
		the <dfn class="dfn-paneled idl-code" data-dfn-for="HighlightsRegister" data-dfn-type="method" data-export data-lt="add(value)" id="dom-highlightsregister-add"><code>add(Highlight value)</code></dfn> method must run these steps:</p>
    <ol>
     <li data-md>
      <p>If there is already a <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-set-entries" id="ref-for-dfn-set-entries③">set entry</a> with the same <code class="idl"><a data-link-type="idl" href="#dom-highlight-name" id="ref-for-dom-highlight-name②">name</a></code> as the <code class="idl"><a data-link-type="idl" href="#dom-highlight-name" id="ref-for-dom-highlight-name③">name</a></code> of <code class="idl"><a data-link-type="idl" href="#dom-highlightsregister-add-value-value" id="ref-for-dom-highlightsregister-add-value-value">value</a></code>,
then <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①">throw</a> an <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#operationerror" id="ref-for-operationerror">"OperationError"</a></code>.</p>
     <li data-md>
      <p>Let <var>valueArg</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-convert-idl-to-ecmascript-value" id="ref-for-dfn-convert-idl-to-ecmascript-value②">converting</a> <code class="idl"><a data-link-type="idl" href="#dom-highlightsregister-add-value-value" id="ref-for-dom-highlightsregister-add-value-value①">value</a></code> to an ECMAScript value.</p>
     <li data-md>
      <p>Let <var>result</var> be the result of running <a href="https://heycam.github.io/webidl/#es-add-delete">the steps for a built-in setlike add function</a>,
with the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object">context object</a> as the <code>this</code> value
and with <var>valueArg</var> as the argument.</p>
     <li data-md>
      <p>Return <var>result</var>.</p>
    </ol>
   </div>
   <h2 class="heading settled" data-level="4" id="styling-highlights"><span class="secno">4. </span><span class="content"> Styling Custom Highlights</span><a class="self-link" href="#styling-highlights"></a></h2>
   <h3 class="heading settled" data-level="4.1" id="custom-highlight-pseudo"><span class="secno">4.1. </span><span class="content"> The Custom Highlight Pseudo-element: <a class="css" data-link-type="maybe" href="#selectordef-highlight-highlight-name" id="ref-for-selectordef-highlight-highlight-name②">::highlight()</a></span><a class="self-link" href="#custom-highlight-pseudo"></a></h3>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-highlight-highlight-name">::highlight(<a class="production css" data-link-type="type" href="#typedef-highlight-name" id="ref-for-typedef-highlight-name">&lt;highlight-name></a>)</dfn> pseudo-element
	(also known as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="custom-highlight-pseudo-element">custom highlight pseudo-element</dfn>)
	represents the portion of a document that
	is being <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#contained" id="ref-for-contained">contained</a> or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#partially-contained" id="ref-for-partially-contained">partially contained</a> in all the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range④">ranges</a> of the <a data-link-type="dfn" href="#registered" id="ref-for-registered④">registered</a> <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight⑨">custom highlight</a> with the <a data-link-type="dfn" href="#custom-highlight-name" id="ref-for-custom-highlight-name">name</a> <a class="production css" data-link-type="type" href="#typedef-highlight-name" id="ref-for-typedef-highlight-name①">&lt;highlight-name></a>,
	if any. <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-highlight-name"><a class="production css" data-link-type="type" href="#typedef-highlight-name" id="ref-for-typedef-highlight-name②">&lt;highlight-name></a></dfn> must be a valid CSS <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token②">&lt;ident-token></a>.</p>
   <h3 class="heading settled" data-level="4.2" id="processing-model"><span class="secno">4.2. </span><span class="content"> Processing Model</span><a class="self-link" href="#processing-model"></a></h3>
   <h4 class="heading settled" data-level="4.2.1" id="applicable-properties"><span class="secno">4.2.1. </span><span class="content"> Applicable Properties</span><a class="self-link" href="#applicable-properties"></a></h4>
   <p><a data-link-type="dfn" href="#custom-highlight-pseudo-element" id="ref-for-custom-highlight-pseudo-element">Custom highlight pseudo-elements</a>,
	like the built-in <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element" id="ref-for-highlight-pseudo-element②">highlight pseudo-elements</a>,
	can only be styled with a limited set of properties.
	See <a href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">CSS Pseudo-Elements 4 §3.2 Styling Highlights</a> for the full list.</p>
   <h4 class="heading settled" data-level="4.2.2" id="c-and-h"><span class="secno">4.2.2. </span><span class="content"> Cascading and Inheritance</span><a class="self-link" href="#c-and-h"></a></h4>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade" id="ref-for-cascade">cascading</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#inheritance" id="ref-for-inheritance">inheritance</a> of <a data-link-type="dfn" href="#custom-highlight-pseudo-element" id="ref-for-custom-highlight-pseudo-element①">custom highlight pseudo-elements</a> is handled
	identically to that of the built-in <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element" id="ref-for-highlight-pseudo-element③">highlight pseudo-elements</a>,
	as defined in <a href="https://www.w3.org/TR/css-pseudo-4/#highlight-cascade">CSS Pseudo-Elements 4 §3.4 Cascading and Per-Element Highlight Styles</a>.</p>
   <h4 class="heading settled" data-level="4.2.3" id="painting"><span class="secno">4.2.3. </span><span class="content"> Painting</span><a class="self-link" href="#painting"></a></h4>
   <p>The painting of <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight①⓪">custom highlights</a> is also handled
	identically to that of the built-in <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element" id="ref-for-highlight-pseudo-element④">highlight pseudo-elements</a>,
	as specified in <a href="https://www.w3.org/TR/css-pseudo-4/#highlight-bounds">CSS Pseudo-Elements 4 §3.3 Area of a Highlight</a> and <a href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">CSS Pseudo-Elements 4 §3.5 Painting the Highlight</a>,
	with the following clarifications:</p>
   <ul>
    <li> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#range-collapsed" id="ref-for-range-collapsed">Collapsed</a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range⑤">ranges</a> are not rendered. 
    <li>
      Overlapping <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range⑥">ranges</a> within a single <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight①①">custom highlight</a> are rendered
			as if a single range representing the union of the overlapping ones
			had been specified. 
     <div class="example" id="overlap-ranges-ex">
      <a class="self-link" href="#overlap-ranges-ex"></a> The following example renders in a single highlight with semi-transparent blue background,
				not two overlapping ones which can be seen through each other. 
<pre class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
  <c- p>::</c-><c- nd>highlight</c-><c- o>(</c-><c- f>sample</c-><c- o>)</c-> <c- p>{</c-> <c- k>background-color</c-><c- p>:</c-> rgba<c- p>(</c-><c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>255</c-><c- p>,</c-> <c- mf>0.3</c-><c- p>);</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->Lorem Ipsum.
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
  <c- a>let</c-> r1 <c- o>=</c-> <c- k>new</c-> Range<c- p>();</c->
  r1<c- p>.</c->setStart<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> <c- mi>1</c-><c- p>);</c->
  r1<c- p>.</c->setEnd<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> <c- mi>5</c-><c- p>);</c->

  <c- a>let</c-> r2 <c- o>=</c-> <c- k>new</c-> Range<c- p>();</c->
  r2<c- p>.</c->setStart<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> <c- mi>3</c-><c- p>);</c->
  r2<c- p>.</c->setEnd<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> <c- mi>7</c-><c- p>);</c->

  CSS<c- p>.</c->highlights<c- p>.</c->add<c- p>(</c-><c- k>new</c-> Highlight<c- p>(</c-><c- u>"sample"</c-><c- p>,</c-> r1<c- p>,</c-> r2<c- p>));</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
      <p>In other words, this rendering would be correct:</p>
      <div class="sample-out"> L<span style="background-color: rgba(0, 0, 255, 0.3)">orem I</span>psum. </div>
      <p>However, this one would be incorrect:</p>
      <div class="sample-out"> L<span style="background-color: rgba(0, 0, 255, 0.3)">or<span style="background-color: rgba(0, 0, 255, 0.3)">em</span> I</span>psum. </div>
     </div>
    <li> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-overlay" id="ref-for-highlight-overlay">highlight overlays</a> of the <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight①②">custom highlights</a> are above those of the built-in <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element" id="ref-for-highlight-pseudo-element⑤">highlight pseudo-elements</a> in the stacking order described in <a href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">CSS Pseudo-Elements 4 §3.5 Painting the Highlight</a>. 
    <li> The relative stacking order of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-overlay" id="ref-for-highlight-overlay①">highlight overlays</a> of multiple <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight①③">custom highlights</a> is defined by their <a data-link-type="dfn" href="#priority" id="ref-for-priority">priority</a> (see <a href="#priorities">§ 4.2.4 Priority of Overlapping Highlights</a>). 
   </ul>
   <h4 class="heading settled" data-level="4.2.4" id="priorities"><span class="secno">4.2.4. </span><span class="content"> Priority of Overlapping Highlights</span><a class="self-link" href="#priorities"></a></h4>
   <p>A <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight①④">custom highlight</a>'s <code class="idl"><a data-link-type="idl" href="#dom-highlight-priority" id="ref-for-dom-highlight-priority②">priority</a></code> attribute
	defines its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="priority">priority</dfn>.
	This is used to determine the stacking order of the corresponding <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-overlay" id="ref-for-highlight-overlay②">highlight overlay</a> during painting operations (see <a href="#painting">§ 4.2.3 Painting</a>).
	A higher <a data-link-type="dfn" href="#priority" id="ref-for-priority①">priority</a> results in being above in the stacking order.</p>
   <p>When two ore more <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight①⑤">custom highlights</a> have the same numerical priority,
	the one most recently <a data-link-type="dfn" href="#registered" id="ref-for-registered⑤">registered</a> has the higher effective <a data-link-type="dfn" href="#priority" id="ref-for-priority②">priority</a>.</p>
   <p class="issue" id="issue-6b09ba7a"><a class="self-link" href="#issue-6b09ba7a"></a> should negative numbers mean stacking
	below the built-in <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element" id="ref-for-highlight-pseudo-element⑥">highlight pseudo-elements</a>? <a href="https://github.com/w3c/csswg-drafts/issues/4593">&lt;https://github.com/w3c/csswg-drafts/issues/4593></a></p>
   <p class="issue" id="issue-7f598661"><a class="self-link" href="#issue-7f598661"></a> Should priority be an (unsigned) integer instead?
	That would make comparisons more reliable,
	but would likely lead to numbering reminiscent of BASIC line numbers. <a href="https://github.com/w3c/csswg-drafts/issues/4592">&lt;https://github.com/w3c/csswg-drafts/issues/4592></a></p>
   <p class="issue" id="issue-9b0b5517"><a class="self-link" href="#issue-9b0b5517"></a> Should we drop priority by numbers entirely,
	and replace it with some other ordering mechanism?
	Experience with BASIC line number or z-index
	does not give much confidence that ordering by number is a good idea.
	Is placing in an ordered data-structure better?
	Should authors be able to express a desired to be placed above/below
	other named highlights,
	and let the UA figure it out? <a href="https://github.com/w3c/csswg-drafts/issues/4591">&lt;https://github.com/w3c/csswg-drafts/issues/4591></a></p>
   <p class="issue" id="issue-cf4565a8"><a class="self-link" href="#issue-cf4565a8"></a> Should the built-in <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element" id="ref-for-highlight-pseudo-element⑦">highlight pseudo-elements</a> be exposed as well,
	so that they too can be reordered,
	and so that they can be interleaved with custom ones freely? <a href="https://github.com/w3c/csswg-drafts/issues/4594">&lt;https://github.com/w3c/csswg-drafts/issues/4594></a></p>
   <div class="example" id="overlap-highlight-ex">
    <a class="self-link" href="#overlap-highlight-ex"></a> 
<pre class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
  <c- f>p</c-><c- p>::</c-><c- nd>highlight</c-><c- o>(</c-><c- f>foo</c-><c- o>)</c-> <c- p>{</c->
    <c- k>color</c-><c- p>:</c-><c- kc>blue</c-><c- p>;</c->
    <c- k>background-color</c-><c- p>:</c-><c- kc>yellow</c-><c- p>;</c->
  <c- p>}</c->
  <c- f>p</c-><c- p>::</c-><c- nd>highlight</c-><c- o>(</c-><c- f>bar</c-><c- o>)</c-> <c- p>{</c->
    <c- k>background-color</c-><c- p>:</c-><c- kc>orange</c-><c- p>;</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->Some text
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
  <c- a>let</c-> r1 <c- o>=</c-> <c- k>new</c-> Range<c- p>();</c->
  r1<c- p>.</c->setStart<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> <c- mi>0</c-><c- p>);</c->
  r1<c- p>.</c->setEnd<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> <c- mi>6</c-><c- p>);</c->

  <c- a>let</c-> r2 <c- o>=</c-> <c- k>new</c-> Range<c- p>();</c->
  r2<c- p>.</c->setStart<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> <c- mi>3</c-><c- p>);</c->
  r2<c- p>.</c->setEnd<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> <c- mi>9</c-><c- p>);</c->

  CSS<c- p>.</c->highlights<c- p>.</c->add<c- p>(</c-><c- k>new</c-> Highlight<c- p>(</c-><c- u>"foo"</c-><c- p>,</c-> r1<c- p>));</c->
  CSS<c- p>.</c->highlights<c- p>.</c->add<c- p>(</c-><c- k>new</c-> Highlight<c- p>(</c-><c- u>"bar"</c-><c- p>,</c-> r2<c- p>));</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
    <p>As there are no priorities set
		(i.e. there is a tie between <code>rg1</code> and <code>rg2</code>),
		the custom highlights' styles are stacked
		in order of insertion into the <a data-link-type="dfn" href="#highlights-register" id="ref-for-highlights-register③">highlights register</a>.
		The rendered results will have "Som" with blue text on yellow background,
		"e t" with blue text on orange background,
		and "ext" with the default color on orange background.</p>
    <div class="sample-out"> <span style="background:yellow;color:blue;">Som</span><span style="background:orange;color:blue;">e t</span><span style="background:orange;">ext</span> </div>
    <p>Setting <code class="highlight">rg1<c- p>.</c->priority <c- o>=</c-> <c- mi>1</c-><c- p>;</c-></code> would cause <code>rg1</code> to stack higher than <code>rg2</code>,
		which would result in "Some t" being blue on yellow,
		and "ext" being default color on orange.</p>
    <div class="sample-out"> <span style="background:yellow;color:blue;">Some t</span><span style="background:orange;">ext</span> </div>
   </div>
   <h2 class="heading settled" data-level="5" id="changes"><span class="secno">5. </span><span class="content"> Responding to Changes</span><a class="self-link" href="#changes"></a></h2>
   <h3 class="heading settled" data-level="5.1" id="repaint"><span class="secno">5.1. </span><span class="content"> Repaints</span><a class="self-link" href="#repaint"></a></h3>
   <p>The addition or removal
	of a <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight①⑥">custom highlight</a> in the <a data-link-type="dfn" href="#highlights-register" id="ref-for-highlights-register④">highlights register</a>,
	or of a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range⑦">range</a> in a [registered=] <span id="ref-for-custom-highlight①⑦">custom highlight</span>,
	must cause the User Agent to reevaluate the rendering,
	and to repaint if appropriate.</p>
   <p>The User Agent must also repaint highlights as needed
	in response to changes by the author
	to the <code class="idl"><a data-link-type="idl" href="#dom-highlight-priority" id="ref-for-dom-highlight-priority③">priority</a></code>,
	or to the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-bp" id="ref-for-concept-range-bp">boundary points</a> of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#range" id="ref-for-range②">Range</a></code>s
	of a <a data-link-type="dfn" href="#registered" id="ref-for-registered⑥">registered</a> <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight①⑧">custom highlight</a>.</p>
   <p class="issue" id="issue-a4ade514"><a class="self-link" href="#issue-a4ade514"></a> How should we specify the timing (and synchronicity) of this reevaluation? <a href="https://github.com/w3c/csswg-drafts/issues/4596">&lt;https://github.com/w3c/csswg-drafts/issues/4596></a></p>
   <h3 class="heading settled" data-level="5.2" id="range-invalidation"><span class="secno">5.2. </span><span class="content"> Range Updating and Invalidation</span><a class="self-link" href="#range-invalidation"></a></h3>
   <p>Authors can build <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight①⑨">custom highlights</a> using either <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#range" id="ref-for-range③">Range</a></code>s or <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#staticrange" id="ref-for-staticrange①">StaticRange</a></code>s.</p>
   <p>The resulting <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight②⓪">custom highlight</a> represents the same parts of the document,
	and can be styled identically.
	However, the behavior is different
	in case the underlying document is modified.</p>
   <p><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#range" id="ref-for-range④">Range</a></code>s are <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-live-range" id="ref-for-concept-live-range">live ranges</a>.
	The User Agent will adjust the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-bp" id="ref-for-concept-range-bp①">boundary points</a> of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#range" id="ref-for-range⑤">Range</a></code>s
	in response to DOM changes overlapping the range or at its boundary,
	and <a href="#repaint">repaint</a> accordingly. <span id="ref-for-concept-range-bp②">Boundary points</span> of <span id="ref-for-concept-live-range①">live ranges</span> can also be changed
	by the author.</p>
   <p>On the other hand,
	the User Agent must not adjust the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-bp" id="ref-for-concept-range-bp③">boundary points</a> of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#staticrange" id="ref-for-staticrange②">StaticRange</a></code>s
	in response to DOM changes,
	nor can they be modified by the author after creation.</p>
   <div class="advisement">
     Updating all <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#range" id="ref-for-range⑥">Range</a></code> objects as the DOM is modified
		has a significant performance cost.
		Authors who intend to observe DOM changes and react to them
		by adjusting or recreating the ranges in their <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight②①">custom highlights</a> are strongly encouraged to user <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#staticrange" id="ref-for-staticrange③">StaticRange</a></code>s
		in order to avoid this costly but unnecessary step. 
    <p>Conversedly, authors who use <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#staticrange" id="ref-for-staticrange④">StaticRange</a></code>s
		should observe and react to DOM changes,
		by discarding stale <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range⑧">ranges</a> or <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight②②">custom highlights</a> and recreating new ones.</p>
   </div>
   <p>When computing how to render the document,
	if <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-start-node" id="ref-for-concept-range-start-node">start node</a> or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-end-node" id="ref-for-concept-range-end-node">end node</a> of any <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range⑨">range</a> in the <a data-link-type="dfn" href="#highlights-register" id="ref-for-highlights-register⑤">highlights register</a> refer to a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node">Node</a></code> which is no longer <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#in-a-document-tree" id="ref-for-in-a-document-tree">in a document tree</a>,
	the User Agent must ignored that <span id="ref-for-concept-range①⓪">range</span>.
	If the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-start-offset" id="ref-for-concept-range-start-offset">start offset</a> or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-end-offset" id="ref-for-concept-range-end-offset">end offset</a> of any <span id="ref-for-concept-range①①">range</span> are greater than the corresponding node’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-length" id="ref-for-concept-node-length">length</a>,
	The User Agent must behave as if it was equal to that <span id="ref-for-concept-node-length①">length</span>.</p>
   <p class="issue" id="issue-5f31406a"><a class="self-link" href="#issue-5f31406a"></a> As far as I am aware,
	prior uses of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#staticrange" id="ref-for-staticrange⑤">StaticRange</a></code>s were for <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range①②">ranges</a> created by the User Agent
	and passed to the author.
	Here, it’s the other way around,
	which raises (for the first time?)
	the question of invalidation of static ranges.
	Can the above work?
	Is it Fast enough that it’s worth distinguishing static and live ranges?
	Would some alternative handling be better? <a href="https://github.com/w3c/csswg-drafts/issues/4597">&lt;https://github.com/w3c/csswg-drafts/issues/4597></a></p>
   <p class="issue" id="issue-d5e91a86"><a class="self-link" href="#issue-d5e91a86"></a> The interaction of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#staticrange" id="ref-for-staticrange⑥">StaticRange</a></code>s in a <a data-link-type="dfn" href="#custom-highlight" id="ref-for-custom-highlight②③">custom highlight</a> and <span>[css-contain-2]</span> seems problematic:
	on a fully contained element,
	you should expect that DOM changes to descendants of that element
	will not cause invalidation and restyling/repainting
	of elements outside the contained one.
	However, if a static range has a boundary point inside the contained subtree
	and another boundary point outside of it,
	and the DOM in the contained subtree is changed
	so that the boundary point inside no longer points to a valid node,
	the whole range should be ignored,
	which would affect painting outside the contained subtree.
	Is this a weakness of <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-1/#style-containment" id="ref-for-style-containment">style containment</a>,
	or of the invalidation logic above,
	or something else? <a href="https://github.com/w3c/csswg-drafts/issues/4598">&lt;https://github.com/w3c/csswg-drafts/issues/4598></a></p>
   <h2 class="heading settled" data-level="6" id="events"><span class="secno">6. </span><span class="content"> Event Handling</span><a class="self-link" href="#events"></a></h2>
   <p class="issue" id="issue-3d1f5f66"><a class="self-link" href="#issue-3d1f5f66"></a> Section on Events TBD, based on https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/highlight/events-explainer.md</p>
   <p class="issue" id="issue-230bd93b"><a class="self-link" href="#issue-230bd93b"></a> should custom highlights have a dedicated event handling mechanism,
	or should that be added to pseudo-elements in general?</p>
   <div class="non-normative">
    <h2 class="no-num heading settled" id="privsec"><span class="content"> Appendix A. Privacy and Security Considerations</span><a class="self-link" href="#privsec"></a></h2>
    <p><em>This section is non-normative</em>.</p>
    <p class="issue" id="issue-cb646626"><a class="self-link" href="#issue-cb646626"></a> Provide summary of Privacy and Security Considerations for this specification</p>
    <p class="note" role="note"><span>Note:</span> The <a href="http://www.w3.org/2001/tag/">TAG</a> has developed a <a href="https://www.w3.org/TR/security-privacy-questionnaire/">self-review questionnaire</a> to help editors and Working Groups evaluate the risks introduced by their specifications.
	This document was used in preparing this section.</p>
   </div>
   <div class="non-normative">
    <h2 class="no-num heading settled" id="credits"><span class="content"> Appendix B. Acknowledgements</span><a class="self-link" href="#credits"></a></h2>
    <p><em>This section is non-normative</em>.</p>
    <p class="issue" id="issue-f0ab6bff"><a class="self-link" href="#issue-f0ab6bff"></a> Acknowledge people (other than editors) who deserve credit for this.</p>
   </div>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-highlightsregister-add">add(value)</a><span>, in §3.2</span>
   <li><a href="#dom-highlight-highlight">constructor(name)</a><span>, in §3.1</span>
   <li><a href="#dom-highlight-highlight">constructor(name, ...initialRanges)</a><span>, in §3.1</span>
   <li><a href="#custom-highlight">custom highlight</a><span>, in §3.1</span>
   <li><a href="#custom-highlight-pseudo-element">custom highlight pseudo-element</a><span>, in §4.1</span>
   <li><a href="#highlight">Highlight</a><span>, in §3.1</span>
   <li><a href="#selectordef-highlight-highlight-name">::highlight(&lt;highlight-name>)</a><span>, in §4.1</span>
   <li><a href="#typedef-highlight-name">&lt;highlight-name></a><span>, in §4.1</span>
   <li><a href="#dom-highlight-highlight">Highlight(name)</a><span>, in §3.1</span>
   <li><a href="#dom-highlight-highlight">Highlight(name, ...initialRanges)</a><span>, in §3.1</span>
   <li><a href="#dom-css-highlights">highlights</a><span>, in §3.2</span>
   <li><a href="#highlightsregister">HighlightsRegister</a><span>, in §3.2</span>
   <li><a href="#highlights-register">highlights register</a><span>, in §3.2</span>
   <li>
    name
    <ul>
     <li><a href="#dom-highlight-name">attribute for Highlight</a><span>, in §3.1</span>
     <li><a href="#custom-highlight-name">dfn for custom highlight</a><span>, in §3.1</span>
    </ul>
   <li>
    priority
    <ul>
     <li><a href="#dom-highlight-priority">attribute for Highlight</a><span>, in §3.1</span>
     <li><a href="#priority">definition of</a><span>, in §4.2.4</span>
    </ul>
   <li><a href="#registered">registered</a><span>, in §3.2</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-cascade">
   <a href="https://drafts.csswg.org/css-cascade-4/#cascade">https://drafts.csswg.org/css-cascade-4/#cascade</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cascade">4.2.2. 
Cascading and Inheritance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inheritance">
   <a href="https://drafts.csswg.org/css-cascade-4/#inheritance">https://drafts.csswg.org/css-cascade-4/#inheritance</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inheritance">4.2.2. 
Cascading and Inheritance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-style-containment">
   <a href="https://drafts.csswg.org/css-contain-1/#style-containment">https://drafts.csswg.org/css-contain-1/#style-containment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-style-containment">5.2. 
Range Updating and Invalidation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-inactive-selection">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-inactive-selection">https://drafts.csswg.org/css-pseudo-4/#selectordef-inactive-selection</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-inactive-selection">1. 
Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-selection">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-selection">https://drafts.csswg.org/css-pseudo-4/#selectordef-selection</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-selection">1. 
Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-spelling-error">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-spelling-error">https://drafts.csswg.org/css-pseudo-4/#selectordef-spelling-error</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-spelling-error">1. 
Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-highlight-overlay">
   <a href="https://drafts.csswg.org/css-pseudo-4/#highlight-overlay">https://drafts.csswg.org/css-pseudo-4/#highlight-overlay</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-highlight-overlay">4.2.3. 
Painting</a> <a href="#ref-for-highlight-overlay①">(2)</a>
    <li><a href="#ref-for-highlight-overlay②">4.2.4. 
Priority of Overlapping Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-highlight-pseudo-element">
   <a href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element">https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-highlight-pseudo-element">1. 
Introduction</a>
    <li><a href="#ref-for-highlight-pseudo-element①">2. 
Module Interactions</a>
    <li><a href="#ref-for-highlight-pseudo-element②">4.2.1. 
Applicable Properties</a>
    <li><a href="#ref-for-highlight-pseudo-element③">4.2.2. 
Cascading and Inheritance</a>
    <li><a href="#ref-for-highlight-pseudo-element④">4.2.3. 
Painting</a> <a href="#ref-for-highlight-pseudo-element⑤">(2)</a>
    <li><a href="#ref-for-highlight-pseudo-element⑥">4.2.4. 
Priority of Overlapping Highlights</a> <a href="#ref-for-highlight-pseudo-element⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-ident-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token">https://drafts.csswg.org/css-syntax-3/#typedef-ident-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-ident-token">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-typedef-ident-token①">(2)</a>
    <li><a href="#ref-for-typedef-ident-token②">4.1. 
The Custom Highlight Pseudo-element: ::highlight()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-parse-something-according-to-a-css-grammar">
   <a href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar">https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-parse-something-according-to-a-css-grammar">3.1. 
Creating Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-namespacedef-css">
   <a href="https://drafts.csswg.org/cssom-1/#namespacedef-css">https://drafts.csswg.org/cssom-1/#namespacedef-css</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-namespacedef-css">3.2. 
Registering Custom Highlights</a> <a href="#ref-for-namespacedef-css①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssomstring">
   <a href="https://drafts.csswg.org/cssom-1/#cssomstring">https://drafts.csswg.org/cssom-1/#cssomstring</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssomstring">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-cssomstring①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-abstractrange">
   <a href="https://dom.spec.whatwg.org/#abstractrange">https://dom.spec.whatwg.org/#abstractrange</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-abstractrange">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-abstractrange①">(2)</a> <a href="#ref-for-abstractrange②">(3)</a> <a href="#ref-for-abstractrange③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-node">
   <a href="https://dom.spec.whatwg.org/#node">https://dom.spec.whatwg.org/#node</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-node">5.2. 
Range Updating and Invalidation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-range">
   <a href="https://dom.spec.whatwg.org/#range">https://dom.spec.whatwg.org/#range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-range">1. 
Introduction</a>
    <li><a href="#ref-for-range①">3.1. 
Creating Custom Highlights</a>
    <li><a href="#ref-for-range②">5.1. 
Repaints</a>
    <li><a href="#ref-for-range③">5.2. 
Range Updating and Invalidation</a> <a href="#ref-for-range④">(2)</a> <a href="#ref-for-range⑤">(3)</a> <a href="#ref-for-range⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-staticrange">
   <a href="https://dom.spec.whatwg.org/#staticrange">https://dom.spec.whatwg.org/#staticrange</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-staticrange">3.1. 
Creating Custom Highlights</a>
    <li><a href="#ref-for-staticrange①">5.2. 
Range Updating and Invalidation</a> <a href="#ref-for-staticrange②">(2)</a> <a href="#ref-for-staticrange③">(3)</a> <a href="#ref-for-staticrange④">(4)</a> <a href="#ref-for-staticrange⑤">(5)</a> <a href="#ref-for-staticrange⑥">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-range-bp">
   <a href="https://dom.spec.whatwg.org/#concept-range-bp">https://dom.spec.whatwg.org/#concept-range-bp</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-range-bp">5.1. 
Repaints</a>
    <li><a href="#ref-for-concept-range-bp①">5.2. 
Range Updating and Invalidation</a> <a href="#ref-for-concept-range-bp②">(2)</a> <a href="#ref-for-concept-range-bp③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-range-collapsed">
   <a href="https://dom.spec.whatwg.org/#range-collapsed">https://dom.spec.whatwg.org/#range-collapsed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-range-collapsed">4.2.3. 
Painting</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-contained">
   <a href="https://dom.spec.whatwg.org/#contained">https://dom.spec.whatwg.org/#contained</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-contained">4.1. 
The Custom Highlight Pseudo-element: ::highlight()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-context-object">
   <a href="https://dom.spec.whatwg.org/#context-object">https://dom.spec.whatwg.org/#context-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-context-object">3.2. 
Registering Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-range-end-node">
   <a href="https://dom.spec.whatwg.org/#concept-range-end-node">https://dom.spec.whatwg.org/#concept-range-end-node</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-range-end-node">5.2. 
Range Updating and Invalidation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-range-end-offset">
   <a href="https://dom.spec.whatwg.org/#concept-range-end-offset">https://dom.spec.whatwg.org/#concept-range-end-offset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-range-end-offset">5.2. 
Range Updating and Invalidation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-a-document-tree">
   <a href="https://dom.spec.whatwg.org/#in-a-document-tree">https://dom.spec.whatwg.org/#in-a-document-tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-a-document-tree">5.2. 
Range Updating and Invalidation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-node-length">
   <a href="https://dom.spec.whatwg.org/#concept-node-length">https://dom.spec.whatwg.org/#concept-node-length</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-node-length">5.2. 
Range Updating and Invalidation</a> <a href="#ref-for-concept-node-length①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-live-range">
   <a href="https://dom.spec.whatwg.org/#concept-live-range">https://dom.spec.whatwg.org/#concept-live-range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-live-range">5.2. 
Range Updating and Invalidation</a> <a href="#ref-for-concept-live-range①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-partially-contained">
   <a href="https://dom.spec.whatwg.org/#partially-contained">https://dom.spec.whatwg.org/#partially-contained</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-partially-contained">4.1. 
The Custom Highlight Pseudo-element: ::highlight()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-range">
   <a href="https://dom.spec.whatwg.org/#concept-range">https://dom.spec.whatwg.org/#concept-range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-range">1. 
Introduction</a>
    <li><a href="#ref-for-concept-range①">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-concept-range②">(2)</a> <a href="#ref-for-concept-range③">(3)</a>
    <li><a href="#ref-for-concept-range④">4.1. 
The Custom Highlight Pseudo-element: ::highlight()</a>
    <li><a href="#ref-for-concept-range⑤">4.2.3. 
Painting</a> <a href="#ref-for-concept-range⑥">(2)</a>
    <li><a href="#ref-for-concept-range⑦">5.1. 
Repaints</a>
    <li><a href="#ref-for-concept-range⑧">5.2. 
Range Updating and Invalidation</a> <a href="#ref-for-concept-range⑨">(2)</a> <a href="#ref-for-concept-range①⓪">(3)</a> <a href="#ref-for-concept-range①①">(4)</a> <a href="#ref-for-concept-range①②">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-range-start-node">
   <a href="https://dom.spec.whatwg.org/#concept-range-start-node">https://dom.spec.whatwg.org/#concept-range-start-node</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-range-start-node">5.2. 
Range Updating and Invalidation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-range-start-offset">
   <a href="https://dom.spec.whatwg.org/#concept-range-start-offset">https://dom.spec.whatwg.org/#concept-range-start-offset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-range-start-offset">5.2. 
Range Updating and Invalidation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#concept-document-window">https://html.spec.whatwg.org/multipage/window-object.html#concept-document-window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-window">3.2. 
Registering Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-global-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object">https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-global-object">3.2. 
Registering Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pseudo-element">
   <a href="https://drafts.csswg.org/selectors-4/#pseudo-element">https://drafts.csswg.org/selectors-4/#pseudo-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pseudo-element">2. 
Module Interactions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">3.1. 
Creating Custom Highlights</a>
    <li><a href="#ref-for-Exposed①">3.2. 
Registering Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-operationerror">
   <a href="https://heycam.github.io/webidl/#operationerror">https://heycam.github.io/webidl/#operationerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-operationerror">3.2. 
Registering Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-syntaxerror">
   <a href="https://heycam.github.io/webidl/#syntaxerror">https://heycam.github.io/webidl/#syntaxerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-syntaxerror">3.1. 
Creating Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-convert-idl-to-ecmascript-value">
   <a href="https://heycam.github.io/webidl/#dfn-convert-idl-to-ecmascript-value">https://heycam.github.io/webidl/#dfn-convert-idl-to-ecmascript-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-convert-idl-to-ecmascript-value">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-dfn-convert-idl-to-ecmascript-value①">(2)</a>
    <li><a href="#ref-for-dfn-convert-idl-to-ecmascript-value②">3.2. 
Registering Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">3.1. 
Creating Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-set-entries">
   <a href="https://heycam.github.io/webidl/#dfn-set-entries">https://heycam.github.io/webidl/#dfn-set-entries</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-set-entries">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-dfn-set-entries①">(2)</a>
    <li><a href="#ref-for-dfn-set-entries②">3.2. 
Registering Custom Highlights</a> <a href="#ref-for-dfn-set-entries③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-setlike">
   <a href="https://heycam.github.io/webidl/#dfn-setlike">https://heycam.github.io/webidl/#dfn-setlike</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-setlike">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-dfn-setlike①">(2)</a>
    <li><a href="#ref-for-dfn-setlike②">3.2. 
Registering Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-throw">
   <a href="https://heycam.github.io/webidl/#dfn-throw">https://heycam.github.io/webidl/#dfn-throw</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-throw">3.1. 
Creating Custom Highlights</a>
    <li><a href="#ref-for-dfn-throw①">3.2. 
Registering Custom Highlights</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cascade" style="color:initial">cascade</span>
     <li><span class="dfn-paneled" id="term-for-inheritance" style="color:initial">inheritance</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-contain-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-style-containment" style="color:initial">style containment</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-pseudo-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-selectordef-inactive-selection" style="color:initial">::inactive-selection</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-selection" style="color:initial">::selection</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-spelling-error" style="color:initial">::spelling-error</span>
     <li><span class="dfn-paneled" id="term-for-highlight-overlay" style="color:initial">highlight overlay</span>
     <li><span class="dfn-paneled" id="term-for-highlight-pseudo-element" style="color:initial">highlight pseudo-element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-ident-token" style="color:initial">&lt;ident-token></span>
     <li><span class="dfn-paneled" id="term-for-css-parse-something-according-to-a-css-grammar" style="color:initial">parse</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-namespacedef-css" style="color:initial">CSS</span>
     <li><span class="dfn-paneled" id="term-for-cssomstring" style="color:initial">CSSOMString</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-abstractrange" style="color:initial">AbstractRange</span>
     <li><span class="dfn-paneled" id="term-for-node" style="color:initial">Node</span>
     <li><span class="dfn-paneled" id="term-for-range" style="color:initial">Range</span>
     <li><span class="dfn-paneled" id="term-for-staticrange" style="color:initial">StaticRange</span>
     <li><span class="dfn-paneled" id="term-for-concept-range-bp" style="color:initial">boundary point</span>
     <li><span class="dfn-paneled" id="term-for-range-collapsed" style="color:initial">collapsed</span>
     <li><span class="dfn-paneled" id="term-for-contained" style="color:initial">contained</span>
     <li><span class="dfn-paneled" id="term-for-context-object" style="color:initial">context object</span>
     <li><span class="dfn-paneled" id="term-for-concept-range-end-node" style="color:initial">end node</span>
     <li><span class="dfn-paneled" id="term-for-concept-range-end-offset" style="color:initial">end offset</span>
     <li><span class="dfn-paneled" id="term-for-in-a-document-tree" style="color:initial">in a document tree</span>
     <li><span class="dfn-paneled" id="term-for-concept-node-length" style="color:initial">length</span>
     <li><span class="dfn-paneled" id="term-for-concept-live-range" style="color:initial">live ranges</span>
     <li><span class="dfn-paneled" id="term-for-partially-contained" style="color:initial">partially contained</span>
     <li><span class="dfn-paneled" id="term-for-concept-range" style="color:initial">range</span>
     <li><span class="dfn-paneled" id="term-for-concept-range-start-node" style="color:initial">start node</span>
     <li><span class="dfn-paneled" id="term-for-concept-range-start-offset" style="color:initial">start offset</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-document-window" style="color:initial">associated document</span>
     <li><span class="dfn-paneled" id="term-for-current-global-object" style="color:initial">current global object</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-pseudo-element" style="color:initial">pseudo-element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-operationerror" style="color:initial">OperationError</span>
     <li><span class="dfn-paneled" id="term-for-syntaxerror" style="color:initial">SyntaxError</span>
     <li><span class="dfn-paneled" id="term-for-dfn-convert-idl-to-ecmascript-value" style="color:initial">converted to an ecmascript value</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
     <li><span class="dfn-paneled" id="term-for-dfn-set-entries" style="color:initial">set entries</span>
     <li><span class="dfn-paneled" id="term-for-dfn-setlike" style="color:initial">setlike</span>
     <li><span class="dfn-paneled" id="term-for-dfn-throw" style="color:initial">throw</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-contain-1">[CSS-CONTAIN-1]
   <dd>Tab Atkins Jr.; Florian Rivoal. <a href="https://www.w3.org/TR/css-contain-1/">CSS Containment Module Level 1</a>. 30 April 2019. CR. URL: <a href="https://www.w3.org/TR/css-contain-1/">https://www.w3.org/TR/css-contain-1/</a>
   <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4]
   <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 25 February 2019. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-cssom-1">[CSSOM-1]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-selectors-4">[SELECTORS-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#highlight" id="ref-for-highlight②①"><c- g>Highlight</c-></a> {
  <a class="idl-code" data-link-type="constructor" href="#dom-highlight-highlight" id="ref-for-dom-highlight-highlight①"><c- g>constructor</c-></a>(<a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring②"><c- n>CSSOMString</c-></a> <a href="#dom-highlight-highlight-name-initialranges-name"><code><c- g>name</c-></code></a>, <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#abstractrange" id="ref-for-abstractrange②①"><c- n>AbstractRange</c-></a>... <a href="#dom-highlight-highlight-name-initialranges-initialranges"><code><c- g>initialRanges</c-></code></a>);
  <c- b>setlike</c->&lt;<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#abstractrange" id="ref-for-abstractrange③①"><c- n>AbstractRange</c-></a>>;
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a> <a data-type="double" href="#dom-highlight-priority"><code><c- g>priority</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring①①"><c- n>CSSOMString</c-></a> <a data-readonly data-type="CSSOMString" href="#dom-highlight-name"><code><c- g>name</c-></code></a>;
};

<c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css①①"><c- g>CSS</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#highlightsregister" id="ref-for-highlightsregister①①"><c- n>HighlightsRegister</c-></a> <a data-readonly data-type="HighlightsRegister" href="#dom-css-highlights"><code><c- g>highlights</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#highlightsregister"><code><c- g>HighlightsRegister</c-></code></a> {
  <c- b>setlike</c->&lt;<a class="n" data-link-type="idl-name" href="#highlight" id="ref-for-highlight④①"><c- n>Highlight</c-></a>>;
  <a class="n" data-link-type="idl-name" href="#highlightsregister" id="ref-for-highlightsregister②①"><c- n>HighlightsRegister</c-></a> <a class="idl-code" data-link-type="method" href="#dom-highlightsregister-add" id="ref-for-dom-highlightsregister-add②"><c- g>add</c-></a>(<a class="n" data-link-type="idl-name" href="#highlight" id="ref-for-highlight⑤①"><c- n>Highlight</c-></a> <a href="#dom-highlightsregister-add-value-value"><code><c- g>value</c-></code></a>);
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> should negative numbers mean stacking
	below the built-in <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element">highlight pseudo-elements</a>? <a href="https://github.com/w3c/csswg-drafts/issues/4593">&lt;https://github.com/w3c/csswg-drafts/issues/4593></a><a href="#issue-6b09ba7a"> ↵ </a></div>
   <div class="issue"> Should priority be an (unsigned) integer instead?
	That would make comparisons more reliable,
	but would likely lead to numbering reminiscent of BASIC line numbers. <a href="https://github.com/w3c/csswg-drafts/issues/4592">&lt;https://github.com/w3c/csswg-drafts/issues/4592></a><a href="#issue-7f598661"> ↵ </a></div>
   <div class="issue"> Should we drop priority by numbers entirely,
	and replace it with some other ordering mechanism?
	Experience with BASIC line number or z-index
	does not give much confidence that ordering by number is a good idea.
	Is placing in an ordered data-structure better?
	Should authors be able to express a desired to be placed above/below
	other named highlights,
	and let the UA figure it out? <a href="https://github.com/w3c/csswg-drafts/issues/4591">&lt;https://github.com/w3c/csswg-drafts/issues/4591></a><a href="#issue-9b0b5517"> ↵ </a></div>
   <div class="issue"> Should the built-in <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#highlight-pseudo-element">highlight pseudo-elements</a> be exposed as well,
	so that they too can be reordered,
	and so that they can be interleaved with custom ones freely? <a href="https://github.com/w3c/csswg-drafts/issues/4594">&lt;https://github.com/w3c/csswg-drafts/issues/4594></a><a href="#issue-cf4565a8"> ↵ </a></div>
   <div class="issue"> How should we specify the timing (and synchronicity) of this reevaluation? <a href="https://github.com/w3c/csswg-drafts/issues/4596">&lt;https://github.com/w3c/csswg-drafts/issues/4596></a><a href="#issue-a4ade514"> ↵ </a></div>
   <div class="issue"> As far as I am aware,
	prior uses of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#staticrange">StaticRange</a></code>s were for <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range">ranges</a> created by the User Agent
	and passed to the author.
	Here, it’s the other way around,
	which raises (for the first time?)
	the question of invalidation of static ranges.
	Can the above work?
	Is it Fast enough that it’s worth distinguishing static and live ranges?
	Would some alternative handling be better? <a href="https://github.com/w3c/csswg-drafts/issues/4597">&lt;https://github.com/w3c/csswg-drafts/issues/4597></a><a href="#issue-5f31406a"> ↵ </a></div>
   <div class="issue"> The interaction of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#staticrange">StaticRange</a></code>s in a <a data-link-type="dfn" href="#custom-highlight">custom highlight</a> and <span>[css-contain-2]</span> seems problematic:
	on a fully contained element,
	you should expect that DOM changes to descendants of that element
	will not cause invalidation and restyling/repainting
	of elements outside the contained one.
	However, if a static range has a boundary point inside the contained subtree
	and another boundary point outside of it,
	and the DOM in the contained subtree is changed
	so that the boundary point inside no longer points to a valid node,
	the whole range should be ignored,
	which would affect painting outside the contained subtree.
	Is this a weakness of <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-1/#style-containment">style containment</a>,
	or of the invalidation logic above,
	or something else? <a href="https://github.com/w3c/csswg-drafts/issues/4598">&lt;https://github.com/w3c/csswg-drafts/issues/4598></a><a href="#issue-d5e91a86"> ↵ </a></div>
   <div class="issue"> Section on Events TBD, based on https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/highlight/events-explainer.md<a href="#issue-3d1f5f66"> ↵ </a></div>
   <div class="issue"> should custom highlights have a dedicated event handling mechanism,
	or should that be added to pseudo-elements in general?<a href="#issue-230bd93b"> ↵ </a></div>
   <div class="issue"> Provide summary of Privacy and Security Considerations for this specification<a href="#issue-cb646626"> ↵ </a></div>
   <div class="issue"> Acknowledge people (other than editors) who deserve credit for this.<a href="#issue-f0ab6bff"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="custom-highlight">
   <b><a href="#custom-highlight">#custom-highlight</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-highlight">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-custom-highlight①">(2)</a> <a href="#ref-for-custom-highlight②">(3)</a> <a href="#ref-for-custom-highlight③">(4)</a>
    <li><a href="#ref-for-custom-highlight④">3.2. 
Registering Custom Highlights</a> <a href="#ref-for-custom-highlight⑤">(2)</a> <a href="#ref-for-custom-highlight⑥">(3)</a> <a href="#ref-for-custom-highlight⑦">(4)</a> <a href="#ref-for-custom-highlight⑧">(5)</a>
    <li><a href="#ref-for-custom-highlight⑨">4.1. 
The Custom Highlight Pseudo-element: ::highlight()</a>
    <li><a href="#ref-for-custom-highlight①⓪">4.2.3. 
Painting</a> <a href="#ref-for-custom-highlight①①">(2)</a> <a href="#ref-for-custom-highlight①②">(3)</a> <a href="#ref-for-custom-highlight①③">(4)</a>
    <li><a href="#ref-for-custom-highlight①④">4.2.4. 
Priority of Overlapping Highlights</a> <a href="#ref-for-custom-highlight①⑤">(2)</a>
    <li><a href="#ref-for-custom-highlight①⑥">5.1. 
Repaints</a> <a href="#ref-for-custom-highlight①⑦">(2)</a> <a href="#ref-for-custom-highlight①⑧">(3)</a>
    <li><a href="#ref-for-custom-highlight①⑨">5.2. 
Range Updating and Invalidation</a> <a href="#ref-for-custom-highlight②⓪">(2)</a> <a href="#ref-for-custom-highlight②①">(3)</a> <a href="#ref-for-custom-highlight②②">(4)</a> <a href="#ref-for-custom-highlight②③">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="highlight">
   <b><a href="#highlight">#highlight</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-highlight">1. 
Introduction</a> <a href="#ref-for-highlight①">(2)</a>
    <li><a href="#ref-for-highlight②">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-highlight③">(2)</a>
    <li><a href="#ref-for-highlight④">3.2. 
Registering Custom Highlights</a> <a href="#ref-for-highlight⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="custom-highlight-name">
   <b><a href="#custom-highlight-name">#custom-highlight-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-highlight-name">4.1. 
The Custom Highlight Pseudo-element: ::highlight()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-highlight-highlight-name-initialranges-name">
   <b><a href="#dom-highlight-highlight-name-initialranges-name">#dom-highlight-highlight-name-initialranges-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-highlight-highlight-name-initialranges-name">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-dom-highlight-highlight-name-initialranges-name①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-highlight-highlight-name-initialranges-initialranges">
   <b><a href="#dom-highlight-highlight-name-initialranges-initialranges">#dom-highlight-highlight-name-initialranges-initialranges</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-highlight-highlight-name-initialranges-initialranges">3.1. 
Creating Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-highlight-priority">
   <b><a href="#dom-highlight-priority">#dom-highlight-priority</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-highlight-priority">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-dom-highlight-priority①">(2)</a>
    <li><a href="#ref-for-dom-highlight-priority②">4.2.4. 
Priority of Overlapping Highlights</a>
    <li><a href="#ref-for-dom-highlight-priority③">5.1. 
Repaints</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-highlight-name">
   <b><a href="#dom-highlight-name">#dom-highlight-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-highlight-name">3.1. 
Creating Custom Highlights</a> <a href="#ref-for-dom-highlight-name①">(2)</a>
    <li><a href="#ref-for-dom-highlight-name②">3.2. 
Registering Custom Highlights</a> <a href="#ref-for-dom-highlight-name③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-highlight-highlight">
   <b><a href="#dom-highlight-highlight">#dom-highlight-highlight</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-highlight-highlight">3.1. 
Creating Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="highlights-register">
   <b><a href="#highlights-register">#highlights-register</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-highlights-register">3.2. 
Registering Custom Highlights</a> <a href="#ref-for-highlights-register①">(2)</a> <a href="#ref-for-highlights-register②">(3)</a>
    <li><a href="#ref-for-highlights-register③">4.2.4. 
Priority of Overlapping Highlights</a>
    <li><a href="#ref-for-highlights-register④">5.1. 
Repaints</a>
    <li><a href="#ref-for-highlights-register⑤">5.2. 
Range Updating and Invalidation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="registered">
   <b><a href="#registered">#registered</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-registered">3.2. 
Registering Custom Highlights</a> <a href="#ref-for-registered①">(2)</a> <a href="#ref-for-registered②">(3)</a> <a href="#ref-for-registered③">(4)</a>
    <li><a href="#ref-for-registered④">4.1. 
The Custom Highlight Pseudo-element: ::highlight()</a>
    <li><a href="#ref-for-registered⑤">4.2.4. 
Priority of Overlapping Highlights</a>
    <li><a href="#ref-for-registered⑥">5.1. 
Repaints</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-css-highlights">
   <b><a href="#dom-css-highlights">#dom-css-highlights</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-css-highlights">3.2. 
Registering Custom Highlights</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="highlightsregister">
   <b><a href="#highlightsregister">#highlightsregister</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-highlightsregister">1. 
Introduction</a>
    <li><a href="#ref-for-highlightsregister①">3.2. 
Registering Custom Highlights</a> <a href="#ref-for-highlightsregister②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-highlightsregister-add-value-value">
   <b><a href="#dom-highlightsregister-add-value-value">#dom-highlightsregister-add-value-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-highlightsregister-add-value-value">3.2. 
Registering Custom Highlights</a> <a href="#ref-for-dom-highlightsregister-add-value-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-highlightsregister-add">
   <b><a href="#dom-highlightsregister-add">#dom-highlightsregister-add</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-highlightsregister-add">3.2. 
Registering Custom Highlights</a> <a href="#ref-for-dom-highlightsregister-add①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="selectordef-highlight-highlight-name">
   <b><a href="#selectordef-highlight-highlight-name">#selectordef-highlight-highlight-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-highlight-highlight-name">1. 
Introduction</a> <a href="#ref-for-selectordef-highlight-highlight-name①">(2)</a>
    <li><a href="#ref-for-selectordef-highlight-highlight-name②">4.1. 
The Custom Highlight Pseudo-element: ::highlight()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="custom-highlight-pseudo-element">
   <b><a href="#custom-highlight-pseudo-element">#custom-highlight-pseudo-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-highlight-pseudo-element">4.2.1. 
Applicable Properties</a>
    <li><a href="#ref-for-custom-highlight-pseudo-element①">4.2.2. 
Cascading and Inheritance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-highlight-name">
   <b><a href="#typedef-highlight-name">#typedef-highlight-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-highlight-name">4.1. 
The Custom Highlight Pseudo-element: ::highlight()</a> <a href="#ref-for-typedef-highlight-name①">(2)</a> <a href="#ref-for-typedef-highlight-name②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="priority">
   <b><a href="#priority">#priority</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-priority">4.2.3. 
Painting</a>
    <li><a href="#ref-for-priority①">4.2.4. 
Priority of Overlapping Highlights</a> <a href="#ref-for-priority②">(2)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>